<template>
  <div class="card5">
    <div class="card5-text">
      <div id="card3-left-text2-container">
        <span class="vertical-line1"></span>
        <p id="card5-text1">{{ $t('card5.text1') }}</p>
      </div>
      <div id="card3-left-text2-container">
        <span class="vertical-line2"></span>
        <p id="card5-text2">{{ $t('card5.text2') }}</p>
      </div>
      <div id="card3-left-text2-container">
        <span class="vertical-line2"></span>
        <p id="card5-text3">{{ $t('card5.text3') }}</p>
      </div>
    </div>
    <div class="card5-ph">
      <img class="card5-ph1" src="@/assets/card5-2.png" alt="">
      <img class="card5-ph1" src="@/assets/card5-3.png" alt="">
    </div>
  </div>
</template>

<script>

import {useI18n} from "vue-i18n";
import {onMounted, watch} from "vue";

export default {
  name: 'MyCard5',
  setup() {
    // 使用 useI18n 钩子获取当前语言
    const { locale } = useI18n();

    // 更新样式的函数，根据语言改变样式
    const updateStyles = (lang) => {
      if (lang === 'en') {
        // 如果语言是英文，调整样式
        document.querySelector('#card5-text1').style.fontSize = '2.9vw';
        document.querySelector('#card5-text2').style.fontSize = '1.4vw';
        document.querySelector('#card5-text3').style.fontSize = '1.4vw';
      } else {
        //如何删掉这段代码的话则会造成样式固定导致无法切换回来
        document.querySelector('#card5-text1').style.fontSize = '3vw';
        document.querySelector('#card5-text2').style.fontSize = '1.6vw';
        document.querySelector('#card5-text3').style.fontSize = '1.6  vw';
      }
    };

    // 监听语言变化，当语言变化时更新样式
    watch(() => locale.value, (newLang) => {
      updateStyles(newLang);
    });

    // 组件挂载完成后，根据当前语言更新样式
    onMounted(() => {
      updateStyles(locale.value);
    });
  },
}
</script>


<style scoped>
  .card5 {
    width: 100%;
    height: 100%;
    background: url(@/assets/background6.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2%;
    display: flex;
    flex-direction: column; /* 改为列方向排列 */
    align-items: flex-start;
  }

  .vertical-line1 {
    width: 0.6vw;
    height: 2.2vw;
    background-color: #2E75C9;
    margin-right: 10px;
  }

  .vertical-line2 {
    width: 0.6vw;
    height: 0.6vw;
    background-color: black;
    margin-right: 10px;
  }

  .card5-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 50px;
    padding-left: 70px;
  }

  #card5-text1 {
    font-size: 3vw;
    margin: 0;
    color: #2E75C9;
    font-family: "STSong", "华文中宋", serif;
  }

  #card5-text2 {
    font-size: 1.6vw;
    margin: 0;
    font-family: "STSong", "华文中宋", serif;
  }

  #card5-text3 {
    font-size: 1.6vw;
    margin: 0;
    font-family: "STSong", "华文中宋", serif;
  }

  .card5-ph {
    display: flex;
    justify-content: space-between; /* 水平方向两端对齐 */
    width: 80%;
    margin-top: 2%; /* 文字和图片之间的间距 */
    margin-left: 10%; /* 与文字对齐 */
  }

  .card5-ph1:hover {
    transform: translateY(-10px); /* 向上浮动 */
  }
  .card5-ph1 {
    border-radius: 10px;
    width: 48%; /* 调整图片宽度以在两端对齐 */
    height: auto; /* 确保高度自动调整以保持宽高比 */
    transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
  }

  #card3-left-text2-container {
  display: flex;
  align-items: center;
  margin: 0;
}

  </style>
